<template>
	<el-dialog :visible.sync="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :close-on-press-escape="false">
		<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="'80px'">
			<el-tabs type="border-card" tab-position="left" v-model="dataForm.questionType">
				<el-tab-pane label="单选题" name="单选题">
					<el-form-item label="题目标题" prop="singleTitle">
						<el-input
							v-model="dataForm.title"
							type="textarea"
							:rows="2"
							maxlength="500"
							show-word-limit
							placeholder="题目标题"
						></el-input>
					</el-form-item>
					<el-form-item label="A" prop="singleAnswerA">
						<el-input class="answerOpt" v-model="dataForm.answerA" maxlength="100" show-word-limit placeholder=""></el-input>
					</el-form-item>
					<el-form-item label="B" prop="singleAnswerB">
						<el-input class="answerOpt" v-model="dataForm.answerB" maxlength="100" show-word-limit placeholder=""></el-input>
					</el-form-item>
					<el-form-item
						v-for="(domain, index) in answerOption"
						:key="index"
						:label="domain.label"
						:prop="'single' + '' + domain.value"
					>
						<el-input
							class="answerOpt"
							v-model="dataForm[domain.value]"
							maxlength="100"
							show-word-limit
							placeholder=""
						></el-input>
						<el-button style="margin-left: 3px" @click.prevent="removeAnswer()">
							删除
						</el-button>
					</el-form-item>

					<el-form-item>
						<el-button v-if="addOptvisible" @click.prevent="addAnswer()">
							添加选项
						</el-button>
					</el-form-item>
					<el-form-item label="题目答案" prop="singleAnswer">
						<el-radio-group v-model="dataForm.answer">
							<el-radio label="A"></el-radio>
							<el-radio label="B"></el-radio>
							<el-radio
								v-for="(domain, index) in answerOption"
								:key="index"
								:label="domain.label"
								:prop="domain.value"
							></el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="题目解析" prop="analysis">
						<el-input
							v-model="dataForm.analysis"
							type="textarea"
							:rows="2"
							maxlength="2000"
							show-word-limit
							placeholder="题目解析"
						></el-input>
					</el-form-item>
					<el-form-item label="排序" prop="sort">
						<el-input-number v-model="dataForm.sort" placeholder="排序" :step="1" step-strictly :min="0"></el-input-number>
					</el-form-item>
				</el-tab-pane>
				<el-tab-pane label="多选题" name="多选题">
					<el-form-item label="题目标题" prop="multipleTitle">
						<el-input
							v-model="dataForm.title"
							type="textarea"
							:rows="2"
							maxlength="500"
							show-word-limit
							placeholder="题目标题"
						></el-input>
					</el-form-item>
					<el-form-item label="A" prop="multipleAnswerA">
						<el-input class="answerOpt" v-model="dataForm.answerA" maxlength="100" show-word-limit placeholder=""></el-input>
					</el-form-item>
					<el-form-item label="B" prop="multipleAnswerB">
						<el-input class="answerOpt" v-model="dataForm.answerB" maxlength="100" show-word-limit placeholder=""></el-input>
					</el-form-item>
					<el-form-item
						v-for="(domain, index) in answerOption"
						:key="index"
						:label="domain.label"
						:prop="'multiple' + '' + domain.value"
					>
						<el-input
							class="answerOpt"
							v-model="dataForm[domain.value]"
							maxlength="100"
							show-word-limit
							placeholder=""
						></el-input>
						<el-button style="margin-left: 3px" @click.prevent="removeAnswer()">
							删除
						</el-button>
					</el-form-item>

					<el-form-item>
						<el-button v-if="addOptvisible" @click.prevent="addAnswer()">
							添加选项
						</el-button>
					</el-form-item>
					<el-form-item label="题目答案" prop="multipleAnswer">
						<el-checkbox-group v-model="multipleAnswer">
							<el-checkbox label="A"></el-checkbox>
							<el-checkbox label="B"></el-checkbox>
							<el-checkbox
								v-for="(domain, index) in answerOption"
								:key="index"
								:label="domain.label"
								:prop="domain.value"
							></el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label="题目解析" prop="analysis">
						<el-input
							v-model="dataForm.analysis"
							type="textarea"
							:rows="2"
							maxlength="2000"
							show-word-limit
							placeholder="题目解析"
						></el-input>
					</el-form-item>

					<el-form-item label="排序" prop="sort">
						<el-input-number v-model="dataForm.sort" placeholder="排序" :step="1" step-strictly :min="0"></el-input-number>
					</el-form-item>
				</el-tab-pane>
			</el-tabs>
		</el-form>
		<template slot="footer">
			<el-button @click="visible = false" size="medium" type="danger">取消</el-button>
			<el-button type="primary" @click="dataFormSubmitHandle()" size="medium">确定</el-button>
		</template>
	</el-dialog>
</template>

<script>
import { studyquestionInfo, studyquestionSave, studyquestionEdit } from "@/api/study/exam/studyquestion.js"
import debounce from "lodash/debounce"
export default {
	data() {
		return {
			singleVisible: true,
			multipleVisible: true,
			visible: !false,
			dataForm: {
				id: "",
				qbId: "",
				questionType: "单选题",
				title: "",
				analysis: "",
				answer: "",
				answerA: "",
				answerB: "",
				answerC: "",
				answerD: "",
				answerE: "",
				answerF: "",
				sort: 1,
			},
			multipleAnswer: [],
			answerOption: [],
			optIndex: 67,
			addOptvisible: true,
		}
	},
	computed: {
		dataRule() {
			const _this = this

			// answerOption
			function title(r, v, c) {
				if (_this.dataForm.title == "" || _this.dataForm.title == null) {
					return c(new Error("请输入题目标题"))
				}
				return c()
			}
			function answerA(r, v, c) {
				if (_this.dataForm.answerA == "" || _this.dataForm.answerA == null) {
					return c(new Error("请输入选项"))
				}
				return c()
			}
			function answerB(r, v, c) {
				if (_this.dataForm.answerB == "" || _this.dataForm.answerB == null) {
					return c(new Error("请输入选项"))
				}
				return c()
			}
			function answerC(r, v, c) {
				if (_this.answerOption.length >= 1) {
					if (_this.dataForm.answerC == "" || _this.dataForm.answerC == null) {
						return c(new Error("请输入选项"))
					}
				}
				return c()
			}
			function answerD(r, v, c) {
				if (_this.answerOption.length >= 2) {
					if (_this.dataForm.answerD == "" || _this.dataForm.answerD == null) {
						return c(new Error("请输入选项"))
					}
				}
				return c()
			}
			function answerE(r, v, c) {
				if (_this.answerOption.length >= 3) {
					if (_this.dataForm.answerE == "" || _this.dataForm.answerE == null) {
						return c(new Error("请输入选项"))
					}
				}
				return c()
			}
			function answerF(r, v, c) {
				if (_this.answerOption.length >= 4) {
					if (_this.dataForm.answerF == "" || _this.dataForm.answerF == null) {
						return c(new Error("请输入选项"))
					}
				}
				return c()
			}
			return {
				singleTitle: [{ required: true, message: "请输入题目标题", trigger: "change", validator: title }],
				singleAnswerA: [{ required: true, trigger: "change", validator: answerA }],
				singleAnswerB: [{ required: true, trigger: "change", validator: answerB }],
				singleanswerC: [{ required: true, trigger: "change", validator: answerC }],
				singleanswerD: [{ required: true, trigger: "change", validator: answerD }],
				singleanswerE: [{ required: true, trigger: "change", validator: answerE }],
				singleanswerF: [{ required: true, trigger: "change", validator: answerF }],

				multipleTitle: [{ required: true, message: "请输入题目标题", trigger: "change", validator: title }],
				multipleAnswerA: [{ required: true, trigger: "change", validator: answerA }],
				multipleAnswerB: [{ required: true, trigger: "change", validator: answerB }],
				multipleanswerC: [{ required: true, trigger: "change", validator: answerC }],
				multipleanswerD: [{ required: true, trigger: "change", validator: answerD }],
				multipleanswerE: [{ required: true, trigger: "change", validator: answerE }],
				multipleanswerF: [{ required: true, trigger: "change", validator: answerF }],

				singleAnswer: [
					{
						required: true,
						message: "请选择题目答案",
						trigger: "change",
						validator(r, v, c) {
							console.log(_this.dataForm.answer, _this.dataForm.questionType)
							if (_this.dataForm.questionType != "单选题") {
								return c()
							}
							if (_this.dataForm.answer == "" || _this.dataForm.answer == null) {
								return c(new Error("请选择题目答案"))
							}
							return c()
						},
					},
				],
				multipleAnswer: [
					{
						required: true,
						message: "请选择题目答案",
						trigger: "change",
						validator(r, v, c) {
							if (_this.dataForm.questionType != "多选题") {
								return c()
							}
							if (_this.multipleAnswer.length <= 0) {
								return c(new Error("请选择题目答案"))
							}
							return c()
						},
					},
				],
			}
		},
	},
	methods: {
		inputHandle() {},
		init(id, qbId) {
			this.resetForm()
			if (id) {
				this.dataForm.id = id
			}
			this.visible = true
			this.optIndex = 67
			this.multipleAnswer = []
			this.answerOption = []
			this.singleVisible = true
			this.multipleVisible = true
			this.$nextTick(() => {
				this.$refs["dataForm"].resetFields()
				this.dataForm.qbId = qbId
				this.dataForm.title = ""
				this.dataForm.answer = ""
				this.dataForm.answerA = ""
				this.dataForm.answerB = ""
				this.dataForm.answerC = ""
				this.dataForm.answerD = ""
				this.dataForm.answerE = ""
				this.dataForm.answerF = ""
				if (this.dataForm.id) {
					this.getInfo()
				}
			})
		},
		// 获取信息
		getInfo() {
			studyquestionInfo(this.dataForm.id)
				.then(res => {
					if (res.code !== 0) {
						return this.$message.error(res.msg)
					}

					if (res.data.questionType == "单选题") {
						this.tabPage = "单选题"
					} else {
						this.tabPage = "多选题"
						if (res.data.answer) {
							this.multipleAnswer = res.data.answer.split(",")
						}
					}
					//加载答案数据
					if (res.data.answerC) {
						this.answerOption.push({
							value: "answerC",
							label: "C",
							key: Date.now(),
						})
						this.optIndex++
					}
					if (res.data.answerD) {
						this.answerOption.push({
							value: "answerD",
							label: "D",
							key: Date.now(),
						})
						this.optIndex++
					}
					if (res.data.answerE) {
						this.answerOption.push({
							value: "answerE",
							label: "E",
							key: Date.now(),
						})
						this.optIndex++
					}
					if (res.data.answerF) {
						this.answerOption.push({
							value: "answerF",
							label: "F",
							key: Date.now(),
						})
						this.optIndex++
					}
					this.dataForm = {
						...this.dataForm,
						...res.data,
					}
				})
				.catch(() => {})
		},
		// 表单提交
		dataFormSubmitHandle: debounce(
			function() {
				this.$refs["dataForm"].validate(valid => {
					console.log(valid)
					if (!valid) {
						return false
					}
					if (this.tabPage == "多选题") {
						this.multipleAnswer.sort()
						this.dataForm.answer = this.multipleAnswer.join(",")
					}
					// this.$http[!this.dataForm.id ? "post" : "put"]("/exam/cpbquestion/", this.dataForm)
					// 	.then(({ data: res }) => {
					// 		if (res.code !== 0) {
					// 			return this.$message.error(res.msg)
					// 		}
					// 		this.$message({
					// 			message: this.$t("prompt.success"),
					// 			type: "success",
					// 			duration: 500,
					// 			onClose: () => {
					// 				this.visible = false
					// 				this.$emit("refreshDataList")
					// 			},
					// 		})
					// 	})
					// 	.catch(() => {})

					//修改
					if (this.dataForm.id) {
						studyquestionEdit(this.dataForm).then(resp => {
							if (resp.code == 0) {
								this.$message({
									type: "success",
									message: "操作成功!",
								})
								this.$emit("refreshData")
								this.visible = false
							} else {
								this.$msg({
									message: resp.msg,
									type: "error",
								})
							}
						})
						//新增
					} else {
						studyquestionSave(this.dataForm).then(resp => {
							if (resp.code == 0) {
								this.$message({
									type: "success",
									message: "操作成功!",
								})
								this.$emit("refreshData")
								this.visible = false
							} else {
								this.$msg({
									message: resp.msg,
									type: "error",
								})
							}
						})
					}
				})
			},
			1000,
			{ leading: true, trailing: false },
		),
		//删除答案
		removeAnswer() {
			this.addOptvisible = true
			//将答案清空
			this.dataForm[this.answerOption[this.answerOption.length - 1].value] = ""
			//将选项清空
			if (this.multipleAnswer.length > 0) {
				this.multipleAnswer.sort()
				this.multipleAnswer.pop()
			}
			this.answerOption.pop()
			this.optIndex--
		},
		//添加答案
		addAnswer() {
			let answerOpt = String.fromCharCode(this.optIndex++)
			this.answerOption.push({
				value: "answer" + answerOpt,
				label: answerOpt,
				key: "as" + Date.now(),
			})
			if (this.optIndex >= 71) {
				this.addOptvisible = false
			}
		},
		//切换tabs
		resetForm() {
			this.dataForm = {
				id: "",
				qbId: "",
				questionType: "单选题",
				title: "",
				analysis: "",
				answer: "",
				answerA: "",
				answerB: "",
				answerC: "",
				answerD: "",
				answerE: "",
				answerF: "",
				sort: 1,
			}
			this.$nextTick(() => {
				if (this.$refs["dataForm"]) {
					this.$refs["dataForm"].resetFields()
				}
			})
		},
	},
}
</script>
<style scoped>
.answerOpt {
	width: 80%;
}
</style>
